/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="read-stream-service_form"
             :label-width="120">
        <sf-alert
            :title="dataTitle"
            size="small"
            :center="false"
            type="warning"
            :animation="false"
            opr-text=""
            :closable="false"
            class="source-alert" />
        <div class="form__title">
            <lang>基本信息</lang>
        </div>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>模型名称</lang>
            </sf-fieldlabel>
            <div class="common-name">
                {{ formData.modelName }}
            </div>
        </sf-form-item>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>服务名称</lang>
            </sf-fieldlabel>
            <div class="common-name">
                {{ formData.name }}
            </div>
        </sf-form-item>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>描述</lang>
            </sf-fieldlabel>
            <div class="common-name flex-1">
                {{ formData.description }}
            </div>
        </sf-form-item>
        <div class="form__title">
            <lang>Kafka配置</lang>
        </div>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>BootStrapServer</lang>
            </sf-fieldlabel>
            <div class="common-name">
                {{ kafkaBootStrapServers }}
            </div>
        </sf-form-item>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>Input Topic</lang>
            </sf-fieldlabel>
            <div class="common-name">
                {{ formData.inputTopic }}
            </div>
        </sf-form-item>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>Output Topic</lang>
            </sf-fieldlabel>
            <div class="common-name">
                {{ formData.outputTopic }}
            </div>
        </sf-form-item>
        <div class="form__title blue"
             @click="showHighSet = !showHighSet">
            <lang>高级配置</lang>
            <i
                class="sf-comp-iconfont "
                :class="
                    showHighSet
                        ? 'icon-comp-arrow-right'
                        : 'icon-comp-arrow-down'
                "></i>
        </div>
        <sf-form-item v-if="showHighSet"
                      class="flex-center">
            <sf-fieldlabel>
                <lang>配置参数</lang>
            </sf-fieldlabel>
            <div class="common-name flex-1 break-all">
                {{ formData.advancedParameters }}
            </div>
        </sf-form-item>
        <div class="form__title">
            <lang>上线配置</lang>
        </div>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>失败自动重启</lang>
            </sf-fieldlabel>
            <div class="common-name">
                {{ formData.autoRestart ? _('开启') : _('关闭') }}
            </div>
        </sf-form-item>
        <sf-form-item v-if="formData.autoRestart"
                      class="flex-center">
            <sf-fieldlabel>
                <lang>接入数据类型</lang>
            </sf-fieldlabel>
            <div class="common-name">
                {{ formData.realTimeState ? _('接入实时数据') : _('接入历史数据') }}
            </div>
        </sf-form-item>
        <div class="form__title">
            <lang>服务资源配置</lang>
        </div>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>实例个数</lang>
            </sf-fieldlabel>
            <div class="common-name">
                {{ formData.numExecutors }}
            </div>
        </sf-form-item>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>单实例资源分配</lang>
            </sf-fieldlabel>
            <div class="resource">
                <div class="resource-list">
                    <i class="iconfont iconCPU"></i> CPU资源
                    {{ formData.executorCores }}核
                </div>
                <div class="resource-list">
                    <i class="iconfont iconneicun"></i> 内存资源
                    {{ formData.executorMemory }}
                </div>
            </div>
        </sf-form-item>
    </sf-form>
</template>
<script lang="ts">
const DEFAULT_VALUE = {
    description: '',
    name: '',
    kafkaBootStrapServers: [],
    outputTopic: '',
    inputTopic: '',
    numExecutors: 1,
    modelId: '',
    modelName: '',
    advancedParameters: ''
};

interface FormData {
    readableName: string;
    description: string;
    name: string;
    inputTopic: number;
    outputTopic: string;
    advancedParameters: string;
    numExecutors: number;
    modelId: string;
    modelName: string;
}

import { Component, Vue } from 'vue-property-decorator';

import { multiTrimArr } from 'src/util/format';

@Component
export default class ReadStreamServiceForm extends Vue {
    formData = { ...DEFAULT_VALUE };
    resourceData = {
        cpuNum: 1,
        memorySize: 1
    };
    kafkaBootStrapServers = '';
    showHighSet = false;
    modelList = [];
    dataTitle = _('若需编辑服务配置内容，请先下线服务。');

    getJsonValue () {
        // @ts-ignore
        this.formData.kafkaBootStrapServers = multiTrimArr(
            this.kafkaBootStrapServers,
            // @ts-ignore
            /\r?\n/
        );
        return this.formData;
    }

    setJsonValue (data: FormData) {
        // @ts-ignore
        this.kafkaBootStrapServers = data.kafkaBootStrapServers.join(',');
        Object.assign(this.formData, data);
    }
}
</script>
<style lang="less">
.read-stream-service_form {
    .source-alert {
        &.sfv-alert__wrapper.sfv-alert--light.sfv-alert--warning {
            background: #fdfaf3;
            color: #884c00;
            margin: 3px 0;
            background: #fdfaf3;
            border: 1px solid rgba(173, 104, 0, 0.08);
            border-radius: 4px;
        }
    }
    padding: 0 32px;
    height: 600px;
    width: 654px;
    .flex-1 {
        flex: 1;
    }
    .form__title {
        font-size: 14px;
        margin: 14px 0;
        color: #14161a;
        font-weight: bold;
        &.blue {
            color: #204ed9;
            cursor: pointer;
        }
    }
    .resource-list {
        margin-bottom: 6px;
        .iconfont {
            font-size: 12px;
        }
    }
    .sfv-form-item {
        margin-bottom: 10px;
    }
    .flex-center {
        display: flex;
        align-items: center;
        .common-name {
            margin-left: 4px;
            color: #14161a;
        }
        .break-all{
            word-break: break-all;
        }
    }
    .sfv-fieldlabel-left {
        padding-left: 0;
    }
}
.form-flex {
    display: flex;
}
</style>
